<template>
	<view class="mt-20">
		<view class="flex mb-30">
			<view :class="[tab==i?'font-bold mr-30':'mr-30']" v-for="e,i in tabList[job]" :key="i" @click="handleTab(i)">
				<text class="text-sm">{{e}}</text>
				<view class="h-12 w-40 bg-gradient-to-r from-[#329EFF] to-[#fff]" v-if="tab==i">
				</view>
			</view>
		</view>
		<view class="" v-if="!pageLoading">
			<view class="" v-if="job=='host'">
				<!-- 解读案例 -->
				<view class="" v-if="tab==0">
					<CaseListVue v-for="e,i in caseList" :key="i" :val="e" :isSelf="isSelf"></CaseListVue>
				</view>
				<!-- 提问解读 -->
				<view class="" v-if="tab==1">
					<questionsListVue v-for="e,i in answerList" :key="i" :val="e"></questionsListVue>
				</view>
				<!-- 风格评价 -->
				<view class="flex flex-wrap pb-20" v-if="tab==2">
					<view class="p-12 rounded mr-10" v-for="e,i in tipslist" :key="i" :style="{background:e.backcolor}">
						<text class="" :style="{color:e.fontcolor}">{{e.name}}</text>
					</view>
				</view>
			</view>
			<view class="" v-if="job=='user'">
				<!-- 帖子 -->
				<view class="" v-if="tab==0">
					<PostList v-for="e,i in postList" :key="i" :val="e"></PostList>
				</view>
				<!-- 测试 -->
				<view class="" v-if="tab==1">
				</view>
				<!-- 提问 -->
				<view class="" v-if="tab==2">
					<questionsListVue v-for="e,i in questionsList" :key="i" :val="e"></questionsListVue>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		nextTick
	} from 'vue';
	import {
		onShow,
	} from "@dcloudio/uni-app"
	import userApi from '@/apis/apiList/userApi';
	import CaseListVue from './CaseList.vue';
	import PostList from '../community/PostList.vue'
	import questionsListVue from '@/components/questionsList.vue';

	const props = defineProps({
		modelValue: {},
		isAch: {
			type: Number,
			default: 0
		},
		id: {
			type: String
		},
		userId: {
			type: String
		},
		isSelf: {
			type: Boolean,
			default: true
		}
	})
	const emit = defineEmits(['update:modelValue'])

	// 
	const colorList = [{
		bg: 'bg-[#E4F4FF] border-[#B1DDFB]',
		text: 'text-[#3B9BDC]'
	}]
	// 
	const tab = ref(0)
	const userId = ref("")
	const anchorId = ref("")
	const job = ref('user') //身份
	const tabList = {
		user: ["帖子", "测试", "提问"],
		host: ["解读案例", "提问解读", "风格评价"]
	}
	const tipslist = ref([]) // 风格评价
	const postList = ref([]) // 帖子
	const questionsList = ref([]) // 问题
	const caseList = ref([]) // 解读案例
	const answerList = ref([]) // 提问解读
	const loadMore = ref('more')
	const pageLoading = ref(true)

	watch(() => props.isSelf, () => {
		if (props.isSelf) {
			tabList.user = ["帖子", "测试", "提问"]
		} else {
			tabList.user = ["帖子"]
		}
	}, {
		immediate: true
	})

	watch(() => props.modelValue, () => {
		if (props.modelValue != 1) {
			getList(tab.value)
		}
	}, {
		immediate: true
	})

	const handleTab = async (i) => {
		emit('update:modelValue', 1)
		loadMore.value = 'more'
		await nextTick(() => {
			getList(i)
		})
	}
	// 获取底部列表
	const getList = (i) => {
		// console.log(pageLoading.value)
		if (loadMore.value != 'more') {
			return
		}
		if (props.modelValue == 1) {
			pageLoading.value = true
		}
		loadMore.value = 'loading'
		if (i !== null) tab.value = i
		if (job.value == 'user') {
			if (tab.value == 0) {
				userApi.membergetPosslist({
					"member.id": props.id,
					page: props.modelValue,
					limit: 10,
					ppst: 0
				}).then(res => {
					if (props.modelValue == 1) {
						postList.value = res.data
					} else {
						postList.value = [...postList.value, ...res.data]
					}
					if (res.data.length == 0) {
						loadMore.value = 'noMore'
					} else {
						loadMore.value = 'more'
					}
					pageLoading.value = false
				})
			}
			// 用户
			if (tab.value == 2) {
				userApi.membergetPosslist({
					"member.id": props.id,
					page: props.modelValue,
					limit: 10,
					ppst: 2
				}).then(res => {
					if (props.modelValue == 1) {
						questionsList.value = res.data
					} else {
						questionsList.value = [...questionsList.value, ...res.data]
					}
					if (res.data.length == 0) {
						loadMore.value = 'noMore'
					} else {
						loadMore.value = 'more'
					}
					pageLoading.value = false
				})
			}

		}
		if (job.value == 'host') {
			// 解读案例
			if (tab.value == 0) {
				userApi.getAnswerAtAnchorList({
					"anchor.id": props.id,
					yc: -1,
					page: props.modelValue,
					limit: 10,
					"poss.ppst": 0
				}).then(res => {
					// console.log(res)
					// postList.value = res.data
					if (props.modelValue == 1) {
						caseList.value = res.data
					} else {
						caseList.value = [...caseList.value, ...res.data]
					}
					if (res.data.length == 0) {
						loadMore.value = 'noMore'
					} else {
						loadMore.value = 'more'
					}
					pageLoading.value = false
				})
			}
			// 提问解读
			if (tab.value == 1) {
				userApi.getAnswerAtAnchorList({
					"anchor.id": props.id,
					yc: -1,
					page: props.modelValue,
					limit: 10,
					"poss.ppst": 2
				}).then(res => {
					// console.log(res)
					// postList.value = res.data
					if (props.modelValue == 1) {
						answerList.value = res.data
					} else {
						answerList.value = [...answerList.value, ...res.data]
					}
					if (res.data.length == 0) {
						loadMore.value = 'noMore'
					} else {
						loadMore.value = 'more'
					}
					pageLoading.value = false
				})
			}
			// 获取风格评价
			if (tab.value == 2) {
				console.log(props.userId, 'props.userId')
				userApi.queryMemberTipslist({
					id: props.userId
				}).then(res => {
					tipslist.value = res.data
					pageLoading.value = false
				})
			}
		}
	}
	onShow(() => {
		// userId.value = uni.getStorageSync('user').id
		// anchorId.value = uni.getStorageSync('anchor').id
		if (props.isAch == 1) {
			job.value = 'host'
		} else {
			job.value = 'user'
		}
		getList(null)
	})
</script>

<style>
</style>